<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新东方顶导航</title>
	</head>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
		#main{
			width: 600px;
			border: 1px solid black;
			height: 25px;
			background-image: url(../img/logo.gif);
			background-repeat: no-repeat;
			background-color: rgba(88,88,88,0.3);
		}
		ul li{
			/*float: right;*/
			list-style: none;
			display: inline;
			padding: 10px;
		}
		#img{
			position: absolute;
			right: 765px;
			top: -8px;
		}
		#body{
			border: 1px solid black;
			height: 170px;
			width: 200px;
			z-index: 1;
			position: absolute;
			top: 20px;
			background-color: white;
			left: 384px;
		}
		p{
			line-height: 25px;
		}
	</style>
	<body>
		<div id="main">
			<ul>
				<li style="padding-left: 110px;">购物车</li>
				<li>优惠券|</li>
				<li>快速注卡|</li>
				<li>各地购课|</li>
				<li>手机报|</li>
				<li>网站导航</li>
			</ul>
			<div id="img">
			<img src="../img/open_icon.gif" />
			</div>
		</div>
		<div id="body">
			<p>托福 雅思 考研 职称英语 初中 日语 </p>
			<hr />
			<p>网络课堂 资讯中心 知识堂 大师讲坛 学习论坛 学词 考研搜校</p>
			<hr />
			<p>M-Zone 手机报 时时英语</p>
		</div>
	</body>
</html>






